<template>
    <div class="sign-in-wrapper">
      <div class="sign-in-header">
        <div class="sign-in-head clearfix">
          <div class="sign-in-portrait fl">
            <img :src="userPortrait">
          </div>
          <div class="my-integral fl">
            <h4>
              我的积分
              <router-link to="/"><b>{{integral}}</b> ></router-link>
            </h4>
            <p>已连续签到{{signDays}}天</p>
          </div>
          <div class="sign-in-rank-list fr">
            <router-link to="/rank-list">排行榜</router-link>
          </div>
        </div>
        <div class="sign-in-date">
          <h6>
            连续签到7日后每日得10积分
            <router-link to="/"><van-icon name="question-o" /></router-link>
          </h6>
          <ul class="signInList clearfix">
            <li v-for="(item,index) in signInList" :key="index" class="text-align-c" ref="singnLi" :class="signDays >1 ? 'active' : ''">
              <div class="sign-in-list-integral">+{{item.integral}}</div>
              <div class="sign-in-list-date">{{item.date}}</div>
            </li>
          </ul>
          <p class="sign-in-line"></p>
        </div>
      </div>
      <div class="sign-in-container">
        <h2>完成任务领积分</h2>
        <div class="leading-integral-list">
          <ul>
            <li class="van-hairline--bottom">
              <van-row>
                <van-col span="17">
                  <h4>认真观看视频课程</h4>
                  <p>观看任意1个视频超过10分钟可得5积分，需手动领取</p>
                </van-col>
                <van-col span="6" offset="1" class="text-align-c">

                    <div class="tab-cell">
                      <div class="integral-status" v-if="learnDuration < 10">未完成</div>
                      <div  v-if="learnDuration >= 10">
                        <div class="integral-status get-integral" v-if="courseTaskStatus === 0" @click="videoIntegral" >赚积分</div>
                        <div class="integral-statuxs" v-if="courseTaskStatus === 1">已领取</div>
                      </div>
                      <span>5积分</span>
                    </div>

                </van-col>
              </van-row>
            </li>
            <li class="van-hairline--bottom">
              <van-row>
                <van-col span="17">
                  <h4>转发分享视频/病例解读 {{shareNum}}/3</h4>
                  <p>通过微信转发视频课程或病例解读可得3积分，每天3次</p>
                </van-col>
                <van-col span="6" offset="1" class="text-align-c">
                  <div class="tab-cell">
                    <div class="integral-status" v-if="shareNum < 3">未完成</div>
                    <div v-if="shareNum >= 3">
                      <div class="integral-status get-integral" v-if="shareTaskNum < 3" @click="shareIntegral" >赚积分</div>
                      <div class="integral-status" v-if="shareTaskNum >= 3">已领取</div>
                    </div>
                    <span>3积分</span>
                  </div>
                </van-col>
              </van-row>
            </li>
            <li class="van-hairline--bottom">
              <van-row>
                <van-col span="17">
                  <h4>参与图谱大师直播课程</h4>
                  <p>观看直播课程并参与互动发言，可得10积分</p>
                </van-col>
                <van-col span="6" offset="1" class="text-align-c">
                  <div class="tab-cell">
                    <div class="integral-status" v-if="liveJoinTask === 0">未完成</div>
                    <div v-if="liveJoinTask === 1">
                      <div class="integral-status get-integral" v-if="liveTaskStatus === 0" @click="liveIntegral">赚积分</div>
                      <div class="integral-status" v-if="liveTaskStatus === 1">已领取</div>
                    </div>
                    <span>10积分</span>
                  </div>
                </van-col>
              </van-row>
            </li>
            <li class="van-hairline--bottom">
              <van-row>
                <van-col span="17">
                  <h4>认真学习病例解读</h4>
                  <p>阅读3个病例，可得9积分</p>
                </van-col>
                <van-col span="6" offset="1" class="text-align-c">
                  <div class="tab-cell">
                    <div class="integral-status" v-if="caseJoinTask < 3">未完成</div>
                    <div v-if="caseJoinTask >= 3">
                      <div class="integral-status get-integral" v-if="caseTaskStatus === 0" @click="caseIntegral">赚积分</div>
                      <div class="integral-status" v-if="caseTaskStatus === 1">已领取</div>
                    </div>
                    <span>9积分</span>
                  </div>
                </van-col>
              </van-row>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
  import { Icon,Row, Col,Notify } from 'vant'
  import Cookie from  'js-cookie'
  import ajax from '../../module/ajax/public'

  function getDateStr(dayCount){
    var date1 = new Date()
    //获取dayCount天后的日期
    date1.setDate(date1.getDate()+dayCount)
    var month1 = date1.getMonth()+1
    var day1 = date1.getDate()
    if(dayCount === -1){
      return '昨日'
    }else if(dayCount === 0){
      return '今日'
    }else if(dayCount ===1){
      return '明日'
    }
    return month1+'.'+day1
  }

  export default {
      name: "SignIn",
      components:{
        [Icon.name]:Icon,
        [Row.name]:Row,
        [Col.name]:Col
      },
      inject:['reload'],
      mounted(){
        this.userInfo = JSON.parse(Cookie.get('userInfo'))
        this.userPortrait = this.userInfo.avatar ? this.userInfo.avatar : '/static/images/user-portrait-default.png'
        this.getMyTaskData()
      },
      data(){
          return{
            userInfo:null,
            userPortrait: '',
            signInList:[
              {
                integral:null,
                date:getDateStr(-1)
              },
              {
                integral:null,
                date:getDateStr(0)
              },
              {
                integral:null,
                date:getDateStr(1)
              },
              {
                integral:null,
                date:getDateStr(2)
              },
              {
                integral:null,
                date:getDateStr(3)
              },
              {
                integral:null,
                date:getDateStr(4)
              },
              {
                integral:null,
                date:getDateStr(5)
              }
            ],
            signDays:0,
            shareNum:0,
            shareTaskNum:0,
            learnDuration:0,
            courseTaskStatus:false,
            liveJoinTask:false,
            liveTaskStatus:false,
            caseJoinTask:false,
            caseTaskStatus:false,
            integral:0,
            singned:false,
            signIntegralArray:[4,4,5,6,7,8,9,10,10,10,10,10,10,10],
            signIntegralNewArr:[]
          }
      },
      methods:{
        getMyTaskData(){
          ajax.doAction({
            url: '/user/task',
            type: 'POST',
            successCallback: (data) => {
              // console.log(data)
              let datas = data.data
              this.signDays = datas.signDays
              if(this.signDays > 7){
                this.signIntegralNewArr = this.signIntegralArray.slice(7)
                // console.log('signIntegralNewArr',this.signIntegralNewArr)
              }else {
                this.signIntegralNewArr = this.signIntegralArray.slice(this.signDays-1).splice(0,7)
              }
              this.signInList.filter((value,index)=>{
                // console.log(value)
                value.integral = this.signIntegralNewArr[index]
              })
              this.shareNum = parseInt(datas.shareNum)
              this.shareTaskNum = parseInt(datas.shareTaskNum)
              this.learnDuration = datas.learnDuration
              this.courseTaskStatus = datas.courseTaskStatus
              this.liveJoinTask = datas.liveJoinTask
              this.liveTaskStatus = datas.liveTaskStatus
              this.caseJoinTask = datas.caseJoinTask
              this.caseTaskStatus = datas.caseTaskStatus
              this.integral = datas.integer
              Cookie.set('integral',this.integral)
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        },
        videoIntegral(){
          ajax.doAction({
              url: '/user/getTaskInteger',
              type: 'POST',
              items:{
                type:'course'
              },
              successCallback: (data) => {
                // console.log(data)
                this.reload()

              },
              errorCallback: (data) => {
                console.log('请求失败')
              }
          })
        },
        shareIntegral(){
          ajax.doAction({
            url: '/user/getTaskInteger',
            type: 'POST',
            items:{
              type:'share'
            },
            successCallback: (data) => {
              // console.log(data)
              this.reload()
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        },
        liveIntegral(){
          ajax.doAction({
            url: '/user/getTaskInteger',
            type: 'POST',
            items:{
              type:'live'
            },
            successCallback: (data) => {
              // console.log(data)
              this.reload()
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        },
        caseIntegral(){
          ajax.doAction({
            url: '/user/getTaskInteger',
            type: 'POST',
            items:{
              type:'case'
            },
            successCallback: (data) => {
              // console.log(data)
              this.reload()
            },
            errorCallback: (data) => {
              console.log('请求失败')
            }
          })
        }
      }
    }
</script>

<style>
  .sign-in-wrapper .sign-in-header{
    background: url("/static/images/my-task-bg.png") no-repeat center;
    width: 100%;
    height: 130px;
    background-size: 100% 100%;
    position: relative;
  }
  .sign-in-wrapper .sign-in-head{
    padding-left: 24px;
    padding-top: 24px;
  }
  .sign-in-wrapper .sign-in-portrait{
    border-radius: 50%;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    border: 2px solid #fff;
    overflow: hidden;
  }
  .sign-in-wrapper .my-integral{
    margin-left: 10px;
  }
  .sign-in-wrapper .my-integral h4{
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    margin-bottom: 10px;
  }
  .sign-in-wrapper .my-integral h4 a{
    font-size: 18px;
    color: #fff;
  }
  .sign-in-wrapper .my-integral h4 a b{
    font-size: 18px;
    color: #fff;
  }
  .sign-in-wrapper .my-integral p{
    font-size: 10px;
    color: #e4e4e4;
  }
  .sign-in-wrapper .sign-in-rank-list{
    padding-right: 12px;
    padding-top: 24px;
  }
  .sign-in-wrapper .sign-in-rank-list a{
    color: #fff;
  }
  .sign-in-wrapper .sign-in-date{
    position: absolute;
    left: 12px;
    right: 12px;
    top:85px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.2);
    padding: 12px;
  }
  .sign-in-wrapper .sign-in-date h6{
    font-size: 10px;
    color: #999;
    font-weight: normal;
    text-align: center;
    margin-bottom: 10px;
  }
  .sign-in-wrapper .sign-in-date h6 a i{
    color: #999;
    font-size: 10px;
    vertical-align: bottom;
  }
  .sign-in-wrapper .signInList{
    display: flex;
    justify-content:space-between;
  }
  .sign-in-wrapper .signInList li{
    position: relative;
    z-index: 2;
  }
  .sign-in-wrapper .signInList .sign-in-list-integral{
    background: #e8e8e8;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #999999;
    font-size: 10px;
    margin-bottom: 5px;
    border-radius: 50%;
    text-align: center;
  }
  .sign-in-wrapper .signInList li:nth-of-type(1).active .sign-in-list-integral{
    background: url("/static/images/signed-in-icon.png") no-repeat center;
    background-size: 100% 100%;
    color: #fff;
  }
  .sign-in-wrapper .signInList li:nth-of-type(2) .sign-in-list-integral{
    background: url("/static/images/signed-in-icon.png") no-repeat center;
    background-size: 100% 100%;
    color: #fff;
  }
  .sign-in-wrapper .signInList .sign-in-list-date{
    color: #666666;
    font-size: 10px;
  }
  .sign-in-wrapper .sign-in-line{
    position: absolute;
    left:12px;
    right:12px;
    top:52%;
    height: 1px;
    background: rgba(171,171,171,1);
    z-index: 1;
  }
  .sign-in-wrapper .sign-in-container{
    padding-top: 55px;
    padding-bottom: 20px;
  }
  .sign-in-wrapper .sign-in-container h2{
    padding-left: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    border-bottom: 1px solid #cecece;
  }
  .sign-in-wrapper .sign-in-container .leading-integral-list{
    padding: 0 12px;
  }
  .sign-in-wrapper .sign-in-container .leading-integral-list li{
    font-size: 12px;
    padding: 12px 0;
    position: relative;
  }
  .sign-in-wrapper .leading-integral-list li h4{
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 5px;
  }
  .sign-in-wrapper .leading-integral-list li p{
    color: #999999;
    line-height: 15px;
  }
  .sign-in-wrapper .leading-integral-list li span{
    color: #f0a546;
  }
  .sign-in-wrapper .leading-integral-list li .integral-status{
    background: #c9c9c9;
    width: 70px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    margin-bottom: 5px;
    pointer-events: none;
  }
  .sign-in-wrapper .leading-integral-list li .integral-status.get-integral{
    background: url("/static/images/uncollected-integral-icon.png") no-repeat center;
    background-size: 100% 100%;
    pointer-events: auto;
  }
  .sign-in-wrapper .leading-integral-list li .tab-cell{
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
  }
</style>
